<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
    <title>标签页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
<!--导航-->
<nav  th:replace="_fragments :: menu(5)"  class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu " content="">
             <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="clone icon"></i>归档</a>
            <a href="#" class="active m-item m-mobile-hide item"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>关于我</a>
           <div class="right item">
               <div class="ui icon inverted transparent input">
                   <input type="text" placeholder="search">
                   <i class="search link icon"></i>
               </div>
           </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--中间部分-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581217347693&di=35cb4ece218b104e18e7b21ea7d49a3f&imgtype=0&src=http%3A%2F%2Fwww.jf258.com%2Fuploads%2F2014-08-19%2F101945598.jpg"  alt="" class="ui rounded image">
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text-thin">这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！</p>
                    <p class="m-text-thin">这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！这是我！</p>
                </div>
                <div class="ui attached segment ">
                    <div class="ui label basic orange m-margin-tb-tiny left pointing">编程</div>
                    <div class="ui label basic orange m-margin-tb-tiny left pointing">java</div>
                    <div class="ui label basic orange m-margin-tb-tiny left pointing">.net</div>
                    <div class="ui label basic orange m-margin-tb-tiny left pointing">写作</div>
                </div>
                <div class="ui attached segment ">
                    <div class="ui label basic teal m-margin-tb-tiny left pointing">编程</div>
                    <div class="ui label basic teal m-margin-tb-tiny left pointing">java</div>
                    <div class="ui label basic teal m-margin-tb-tiny left pointing">.net</div>
                    <div class="ui label basic teal m-margin-tb-tiny left pointing">写作</div>
                </div>
                <div class="bottom ui attached segment">
                    <a href="#" class="ui  qq icon" data-content="1195498488" data-position="bottom center"><i class="qq circular icon"></i></a>
                    <a href="#" class="ui wechat icon"><i class="wechat circular icon"></i></a>
                </div>
                <div class="ui wechat-QR flowing popup top left transition hidden">
                    <img src="../static/jpg/QRcode.png" style="width: 120px" alt="" class="ui rounded image">
                </div>
            </div>
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<!--                footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted column">
                    <img src="../static/jpg/QRcode.png" style="width: 120px;height: 120px" alt="">
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">这是一个标题</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">内容内容内容内容内容</a>
                    <a href="#" class="item">内容内容内容内容内容</a>
                    <a href="#" class="item">内容内容内容内容内容</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">这是一个标题</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">内容内容内容内容内容</a>
                    <a href="#" class="item">内容内容内容内容内容</a>
                    <a href="#" class="item">内容内容内容内容内容</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">这是一个标题</h4>
                <div class="ui inverted link list">
                    <p class="m-text-space">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                </div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin">copy right</p>
    </div>

</footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-show');
    });
    $('.qq').popup();
    $('.wechat').popup({
        popup:$('.wechat-QR'),
        on:'hover',
        position:'bottom center'
    });
</script>
</body>
</html>